<template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
          <h3>维修工单</h3>
      </div>
      <el-button type="primary" @click="dit">确认工单</el-button>

      <el-descriptions class="margin-top" title="" :column="1" size="" border>
          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              维修地点
          </template>
            {{ repairInfo.repairLocation }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              维修类型
          </template>
                <el-tag type="" style="background-color: #e54d42; color: white;" v-if="repairInfo.repairType == 1">水路</el-tag>
                <el-tag type="" style="background-color: #f37b1d; color: white;" v-if="repairInfo.repairType == 2">电路</el-tag>
                <el-tag type="" style="background-color: #fbbd08; color: white;" v-if="repairInfo.repairType == 3">门窗</el-tag>
                <el-tag type="" style="background-color: #8dc63f; color: white;" v-if="repairInfo.repairType == 4">公共设施</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              维修进度
          </template>
          <el-tag type="" style="background-color: #e54d42; color: white;" v-if="repairInfo.repairProgress == 1">待分配工单</el-tag>
                <el-tag type="" style="background-color: #f37b1d; color: white;" v-if="repairInfo.repairProgress == 2">待工程确认</el-tag>
                <el-tag type="" style="background-color: #fbbd08; color: white;" v-if="repairInfo.repairProgress == 3">待维修</el-tag>
                <el-tag type="" style="background-color: #8dc63f; color: white;" v-if="repairInfo.repairProgress == 4">已完成</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              工单来源
          </template>
            <el-tag type="warning" v-if="repairInfo.source == 1">业主上报</el-tag>
            <el-tag type="success" v-if="repairInfo.source == 2">已公司指派登记</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              生成时间
          </template>
          {{ repairInfo.createTime }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              报修人联系方式
          </template>
          {{ repairInfo.phone }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              问题描述
          </template>
          {{ repairInfo.description }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-location-outline"></i>
              图片
          </template>
          <el-image 
            v-show="urls.length > 0" 
            style="width: 500px; height: 300px"
            v-for="(url, index) in urls"
            :key="index" 
            :src="url" 
            :preview-src-list="urls"
            fit="contain">
        </el-image>
          <!-- <el-avatar shape="square" style="width: 100px;height: 100px;" :src=" ownerinfo.face!=null?ownerinfo.face:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' "></el-avatar> -->
          </el-descriptions-item>
          
      </el-descriptions>
      
      </el-card>
</template>

<script>
export default {
name:'repairInfo',
data(){
  return{
      repairId:'',
      repairInfo:{},
      urls:[]
  }
},
mounted() {
  // 获取查询参数
  const ID = this.$route.query.ID;
  this.repairId = ID
  console.log('repairId:', ID);
  this.init()
},
activated(){
  const ID = this.$route.query.ID;
  this.repairId = ID
  console.log('repairId:', ID);
  this.init()
},
methods:{
  dit(){
    this.$request.post("/repair/cgstatus",{
            id:this.repairId
      }).then(res=>{
          this.init()
      }).catch(err=>{
          console.error(err)
      })
  },
  init(){
      this.$request.get("/repair/repairById",{
          params:{
            id:this.repairId
          }
      }).then(res=>{
          this.repairInfo = res.data
          let str = res.data.images
          if(str == null || str == ''){
            return;
          }
          str = str.replace("[", "").replace("]", "")
          console.log(str)
          let arr = str.split(',');
          this.urls = arr
          console.log(this.urls)
      }).catch(err=>{
          console.error(err)
      })
  }
}
}
</script>

<style>

</style>